<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{publicpage(title='文件上传')}">
<meta charset="UTF-8">
<div th:fragment="public_right">
    <div th:if="${uploadStatus}" style="color:red" th:text="${uploadStatus}">上传成功</div>
    <form th:action="@{/uploadFile}" method="post" enctype="multipart/form-data">
        <h4>
            上传文件
        </h4>
        <input type="button" value="添加文件" onclick="add()"/>
        <div id="file" style="margin-top:10px;" th:value="文件上传区域"></div>
        <input id="submit" type="submit" value="上传" style="display:none;margin-top:10px;"/>
    </form>
    <script type="text/javascript">
        function add(){
            var innerdiv ="<div style='display:flex'>";
            innerdiv += "<input type='file' name='fileUpload' required='required'>" +
                "<input type='button' value='删除' onclick='remove(this)'>";
            innerdiv += "</div>";
            $("#file").append(innerdiv);
            $("#submit").css("display","block");
        }

        function remove(obj){
            $(obj).parent().remove();
            if($("#file div").length==0) {
                $("#submit").css("display","none");
            }
        }
    </script>
</div>

</html>